<template>
  <el-dialog
    :model-value="visible"
    :title="isEdit ? '编辑秒杀活动' : '新增秒杀活动'"
    width="600px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item label="活动名称" prop="seckillName">
        <el-input v-model="formData.seckillName" placeholder="请输入活动名称" />
      </el-form-item>
      
      <el-form-item label="报名开始时间" prop="signStartTime">
        <el-date-picker
          v-model="formData.signStartTime"
          type="datetime"
          placeholder="请选择报名开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      
      <el-form-item label="报名结束时间" prop="signEndTime">
        <el-date-picker
          v-model="formData.signEndTime"
          type="datetime"
          placeholder="请选择报名结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      
      <el-form-item label="活动开始时间" prop="startTime">
        <el-date-picker
          v-model="formData.startTime"
          type="datetime"
          placeholder="请选择活动开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      
      <el-form-item label="活动结束时间" prop="endTime">
        <el-date-picker
          v-model="formData.endTime"
          type="datetime"
          placeholder="请选择活动结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      
      <el-form-item label="是否需要保证金" prop="ifBond">
        <el-radio-group v-model="formData.ifBond">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item v-if="formData.ifBond === 1" label="保证金金额" prop="bondMoney">
        <el-input-number
          v-model="formData.bondMoney"
          :min="0"
          :precision="2"
          :step="0.01"
          placeholder="请输入保证金金额"
        />
      </el-form-item>
      
      <el-form-item label="优惠券是否叠加" prop="ifAdd">
        <el-radio-group v-model="formData.ifAdd">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="商品限购" prop="ifLimit">
        <el-radio-group v-model="formData.ifLimit">
          <el-radio :label="1">不限购</el-radio>
          <el-radio :label="2">限购</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item v-if="formData.ifLimit === 2" label="限购数量" prop="limitNumber">
        <el-input-number
          v-model="formData.limitNumber"
          :min="1"
          placeholder="请输入限购数量"
        />
      </el-form-item>
      
      <el-form-item label="直降金额" prop="seckillMoney">
        <el-input-number
          v-model="formData.seckillMoney"
          :min="0"
          :precision="2"
          :step="0.01"
          placeholder="请输入直降金额"
        />
      </el-form-item>
      
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { SeckillActivityItem } from '@/api/active/active_seckill'

// 定义属性
const props = defineProps<{
  visible: boolean
  data: SeckillActivityItem | null
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}>()

// 定义是否为编辑模式
const isEdit = ref(false)

// 表单引用
const formRef = ref<FormInstance>()

// 表单数据
const formData = ref<SeckillActivityItem>({
  seckillId: 0,
  seckillName: '',
  signStartTime: '',
  signEndTime: '',
  startTime: '',
  endTime: '',
  ifBond: 2,
  bondMoney: 0,
  ifAdd: 2,
  ifLimit: 1,
  limitNumber: 1,
  seckillMoney: 0,
  state: 0,
  shopNumber: 0,
  productNumber: 0,
  remark: ''
})

// 表单验证规则
const formRules: FormRules = {
  seckillName: [
    { required: true, message: '请输入活动名称', trigger: 'blur' }
  ],
  signStartTime: [
    { required: true, message: '请选择报名开始时间', trigger: 'change' }
  ],
  signEndTime: [
    { required: true, message: '请选择报名结束时间', trigger: 'change' }
  ],
  startTime: [
    { required: true, message: '请选择活动开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择活动结束时间', trigger: 'change' }
  ],
  ifBond: [
    { required: true, message: '请选择是否需要保证金', trigger: 'change' }
  ],
  bondMoney: [
    { required: true, message: '请输入保证金金额', trigger: 'blur' }
  ],
  ifAdd: [
    { required: true, message: '请选择优惠券是否叠加', trigger: 'change' }
  ],
  ifLimit: [
    { required: true, message: '请选择商品限购', trigger: 'change' }
  ],
  limitNumber: [
    { required: true, message: '请输入限购数量', trigger: 'blur' }
  ],
  seckillMoney: [
    { required: true, message: '请输入直降金额', trigger: 'blur' }
  ]
}

// 监听传入的数据变化
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      // 编辑模式
      isEdit.value = true
      formData.value = { ...newData }
    } else {
      // 新增模式
      isEdit.value = false
      // 重置表单数据
      formData.value = {
        seckillId: 0,
        seckillName: '',
        signStartTime: '',
        signEndTime: '',
        startTime: '',
        endTime: '',
        ifBond: 2,
        bondMoney: 0,
        ifAdd: 2,
        ifLimit: 1,
        limitNumber: 1,
        seckillMoney: 0,
        state: 0,
        shopNumber: 0,
        productNumber: 0,
        remark: ''
      }
    }
  },
  { immediate: true }
)

// 监听弹窗显示状态
watch(
  () => props.visible,
  (newVal) => {
    if (!newVal) {
      // 重置表单验证状态
      formRef.value?.resetFields()
    }
  }
)

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      // 触发成功事件
      emit('success')
      // 关闭弹窗
      handleClose()
    } else {
      ElMessage.error('请完善表单信息')
    }
  })
}

// 获取表单数据的方法
const getFormData = () => {
  return { ...formData.value }
}

// 暴露方法给父组件
defineExpose({
  getFormData
})
</script>